<template>

	<view class="rote">
		
		<image class="rote-img" src="../static/icon/start.png" v-if="filterStart()>1" mode=""></image>
		<image class="rote-img" src="../static/icon/start1.png" v-else mode=""></image>
		
		
		<image class="rote-img" src="../static/icon/start.png" v-if="filterStart()>2" mode=""></image>
		<image class="rote-img" src="../static/icon/start1.png" v-else mode=""></image>

		<image class="rote-img" src="../static/icon/start.png" v-if="filterStart()>3" mode=""></image>
		<image class="rote-img" src="../static/icon/start1.png" v-else mode=""></image>

		<image class="rote-img" src="../static/icon/start.png" v-if="filterStart()>4" mode=""></image>
		<image class="rote-img" src="../static/icon/start1.png" v-else mode=""></image>


		<image class="rote-img" src="../static/icon/start.png" v-if="filterStart()>5" mode=""></image>
		<image class="rote-img" src="../static/icon/start1.png" v-else mode=""></image>

	<span>{{rote>0 ?rote:''}}</span> 
	</view>

</template>

<script>
	export default {
		name: 'Start',
		props: {
			rote:{
				type:Number,
				default:0
			}
		},
		data() {
			return {
             
			}
		},
		created(){
		
		},
		methods: {
			filterStart() {	
				return Math.round(5 * (this.rote / 10))
			}
		}
	}
</script>

<style scoped>
	.rote {
		display: flex;
		align-items: center;
		width: 100%;
	}

	.rote-img {
		width: 26upx;
		height: 26upx;
	}

	span {
		margin-left: 10upx;
		font-size: 30upx;
		color: #999999;

	}

</style>
